<template>
   <div class="app-container">
      <el-row :gutter="10">
         <el-col :span="8" :xs="24">
            <el-card class="box-card">
               <div>
                  <div class="text-center user-avatar">
                     <userAvatar />
                     <div class="user-name">{{ state.user.nickName }}</div>
                     <div class="user-role">{{ state.user.userName }}</div>
                  </div>
                  <el-descriptions :column="1">
                        <el-descriptions-item label="手机号码：">
                           {{ state.user.phonenumber }}
                        </el-descriptions-item>
                        <el-descriptions-item label="用户邮箱：">
                           {{ state.user.email }}
                        </el-descriptions-item>
                        <el-descriptions-item label="所属部门：">
                           <el-tag size="small" v-if="state.user.dept"> {{ state.user.dept.deptName ?? '暂无部门' }}</el-tag>
                           <el-tag size="small" style="margin-left: 8px"> {{ state.postGroup }}</el-tag>
                        </el-descriptions-item>
                        <el-descriptions-item label="所属角色：">
                           {{ state.roleGroup }}
                        </el-descriptions-item>
                        <el-descriptions-item label="创建时间：">
                           {{ state.user.createTime }}
                        </el-descriptions-item>
                  </el-descriptions>
               </div>
            </el-card>
         </el-col>
         <el-col :span="16" :xs="24">
            <el-card>
               <el-tabs v-model="activeTab">
                  <el-tab-pane label="基本设置" name="userinfo">
                     <userInfo :user="state.user" />
                  </el-tab-pane>
                  <el-tab-pane label="安全设置" name="resetPwd">
                     <resetPwd />
                  </el-tab-pane>
               </el-tabs>
            </el-card>
         </el-col>
      </el-row>
   </div>
</template>

<script setup name="Profile">
import userAvatar from "./userAvatar";
import userInfo from "./userInfo";
import resetPwd from "./resetPwd";
import { getUserProfile } from "@/api/system/user";

const activeTab = ref("userinfo");
const state = reactive({
  user: {},
  roleGroup: {},
  postGroup: {}
});

function getUser() {
  getUserProfile().then(response => {
    state.user = response.data.user;
    state.roleGroup = response.data.roleGroup;
    state.postGroup = response.data.postGroup;
  });
};

getUser();
</script>
<style lang="scss" scoped>
.el-row {
  height: 450px;
  .el-col {
    height: 100%;
    padding: 5px;

    .el-card {
      height: 100%;
      border-radius: 8px;
      box-shadow: none;
    }
  }
}

.box-card {
  padding: 10px 20px;

  .user-name {
  font-size: 16px;
  font-weight: 700;
  margin-top: 10px;
}

.user-role {
  font-size: 14px;
  color: #999;
  margin-bottom: 20px;
}
}
.el-tab-pane{
  margin-top: 20px;
}
</style>
